/* Basic Settings */

* {
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
}


/* My Base */

html {
  color: @color_text_main;
  width: 100%;
  height: 100%;
  font-family: @fontfamily_base;
  font-size: @fontsize_base;
  line-height: 1.5rem;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background-color: @theme_background;
  &.modal-active {
    overflow: hidden;
    @media (max-width: @on_modal_threshold) {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  &.z_menu-open {
    .menu-phone {
      transform: translate3d(-@gap, 0, 0);
    }
  }
}

fancybox{
  display: flex;
  justify-content: center;
}
.backstretch {
  // opacity: .75;
}
.cover-wrapper{
  padding-bottom: 2px;
  .cover{
    top: 0;
    left: 0;
    max-width: 100%;
    height: ~"calc(100vh)";
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    align-self: center;
    align-content: center;
    // padding: @gap;
    .title, .logo{
      font-size: @fontsize_h1*2;
      margin-top: ~"calc(28vh - 2*@{gap})";
      text-align: center;
      font-weight: bold;
    }
    .title{
      line-height: ~"calc(@{fontsize_h1}*2 + 2*@{gap})";
    }
    .logo{
      max-height: 100px;
      max-width: ~"calc(100% - 4*@{gap})";
    }
    @media(max-width: @on_phone){
      .title, .logo {
        font-size: @fontsize_h1*2;
        line-height: @fontsize_h1*2.2;
      }
    }
    .m_search{
      @iconW: 32px;
      @iconMargin: 4px;
      margin-top: ~"calc(2vh + 2*@{gap})";
      position: relative;
      max-width: ~"calc(100% - 1*@{gap})";
      width: 340px;
      // @media(max-width: @on_laptop){
      //   width: 1.4*@width_sidebar_m;
      // }
      line-height: @height_navbar - @gap;
      vertical-align: middle;
      .form {
        position: relative;
        display: block;
        width: 100%;
      }
      .icon,.input{
        .enable-trans(.3s);
      }
      .icon {
        position: absolute;
        display:block;
        line-height: @searchbar_height_cover;
        height: @searchbar_height_cover;
        width: @iconW;
        top: 0;
        left: @iconMargin+1px;
        font-size: @fontsize_base;
        color: fade(@color_text_main, 60%);
      }
      .input {
        display: block;
        font-size: @fontsize_base;
        line-height: @fontsize_base;
        height: @searchbar_height_cover;
        width: 100%;
        color: @color_text_main;
        box-shadow: none;
        box-sizing: border-box;
        -webkit-appearance: none;
        padding-left: @iconW + @iconMargin;
        @media(max-width: @on_phone){
          padding-left: @iconW + @iconMargin;
        }
        border-radius: @height_navbar;
        background: lighten(@theme_cardbg, 10%);
        border: 1px dashed transparent;
        .set-placeholder({
          padding-top: 2px;
          color: fade(@color_text_main, 60%);
        });
        &:hover{
          ~.icon{
            color: @theme_main;
          }
        }
        &:focus {
          ~.icon{
            color: @theme_main;
          }
          border: 1px solid @theme_main;
        }
      }

    }
    &.half{
      height: ~"calc(60vh - @{gap} - @{height_navbar})";
      .title, .logo{
        margin-top: ~"calc(22vh - 4*@{gap})";
      }
      @media(max-width: @on_phone){
        height: ~"calc(45vh - @{gap} - @{height_navbar})";
        .title, .logo{
          margin-top: ~"calc(24vh - 6*@{gap})";
        }
      }
      .m_search{
        margin-top: @gap;
      }
    }
    &, a{
      color: @theme_main;
    }
    .menu{
      margin-top: @gap;
      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        li {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding: 0;
          height: auto;
        }
      }
      ul > li > a{
        font-size: @fontsize_small;
        padding: 2px;
        margin: 0 4px;
        .enable-trans();
        color: fade(@color_text_main, 85%);
        border-bottom: 1px solid transparent;
        &:hover, &.active{
          color: @theme_main;
          border-bottom: 1px solid @theme_main;
        }
      }
    }
    .switcher{
      & > li{
        a{
          &:hover {
            background: fade(@theme_main, 15%);
          }
        }
      }
    }

  }
}



.z-depth-nav {
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
}
.z-depth-nav-raised {
  box-shadow: @boxshadow_card_raised;
}

.z-depth-main {
  box-shadow: @boxshadow_card_normal;
}

.z-depth-main-raised {
  box-shadow: @boxshadow_card_raised;
}

.z-depth-0 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
}

.z-depth-1 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.z-depth-1-half {
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}

.z-depth-3 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1);
}

.z-depth-4 {
  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11);
}

.z-depth-5 {
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11);
}
.z-depth-0 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.hoverable {
  .enable-trans();
  box-shadow: 0;
}

.hoverable:hover {
  .enable-trans();
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

::-moz-selection {
  background: @color_bg_selection;
}

::selection {
  background: @color_bg_selection;
}
// transition
.enable-trans(@time: 0.25s){
  transition: all @time ease;
  -moz-transition: all @time ease;
  -webkit-transition: all @time ease;
  -o-transition: all @time ease;
}

.set-placeholder(@rules){
  &::-webkit-input-placeholder {@rules();}
  &:-moz-placeholder {@rules();}
	&::-moz-placeholder {@rules();}
	&:-ms-input-placeholder {@rules();}
}


h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  text-rendering: geometricPrecision;
  margin: 0 0 0.4em 0;
}

h1 {
  font-size: @fontsize_h1;
}

h2 {
  font-size: @fontsize_h2;
}

h3 {
  font-size: @fontsize_h3;
}

h4 {
  font-size: @fontsize_h4;
}

h5 {
  font-size: @fontsize_h5;
}

h6 {
  font-size: @fontsize_h6;
}

a {
  color: @black;
  cursor: pointer;
  text-decoration: none;
  .enable-trans();
  &:hover {
    text-decoration: none;
  }
}

pre {
  tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  -webkit-tab-size: 4;
}

img {
  max-width: 100%;
}


/**
*  Util
*/

.clearfix {
  zoom: 1;
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}


.hidden {
  text-indent: -9999px;
  visibility: hidden;
  display: none;
}

.inner {
  position: relative;
  width: 80%;
  max-width: 710px;
  margin: 0 auto;
}

.vertical {
  display: table-cell;
  vertical-align: middle;
}

.right {
  float: right;
}

.left {
  float: left;
}

.disable-trans {
  -moz-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

.txt-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul,
ol {
  padding-left: 0;
}

li {
  list-style: none;
}

.mark {
  position: relative;
  a {
    color: @black;
    background: transparent;
    display: inline-block;
    padding: 0 8px;
    border-left: @border_radius_line solid transparent;
    background: transparent;
    border-radius: @border_radius_code_block;
    .enable-trans();
    &:hover {
      background: fade(@theme_main, 10%);
      border-left: @border_radius_line solid @theme_main;
      padding: 8px;
    }
    &:active {
      border-left: 2*@border_radius_line solid @theme_main;
    }

  }
}

ul.h-list {
  display: flex;
  align-items: center;
  height: 100%;
  &>li {
    // flex: none;
    height: 100%;
    justify-content: center;
  }
}


/**
 *  Loading bar
 */

#loading-bar-wrapper {
  position: fixed;
  top: @height_navbar - @loading_height;
  // top: 0;
  left: 0;
  width: 100%;
  // overflow: scroll;
  z-index: 99999;
}

#loading-bar {
  position: fixed;
  width: 0;
  height: @loading_height;
  // height: @height_navbar;
  .enable-trans();
  background-color: fade(white, 50%);
  &.pure{
    background-color: fade(@theme_main, 50%);
  }
}

.body-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  max-width: @width_container;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.container--flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.l_body {
  position: relative;
  margin: @gap;
  margin-top: @gap;
  &.nocover{
    margin-top: @gap + @height_navbar;
  }
  @media(max-width: @on_phone) {
    margin: @height_navbar + @gap 0 @gap;
    border-radius: 0;
  }
  // padding-top: -@gap/2;
  .s-top{
    .enable-trans(0.6s);
    z-index: 9;
    position: fixed;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 100%;
    bottom: @gap*2;
    right: @gap*2;
    transform: translateY(100px) scale(0);
    transform-origin: bottom;
    color: @color_text_main;
    @media(max-width: @on_pad) {
      right: @gap;
    }
    &.show{
      transform: translateY(0) scale(1);
      &.hl{
        background: @theme_main;
        color: white;
        box-shadow: @boxshadow_card_normal;
      }
    }
    @media(min-width: @on_pad) {
      &:hover{
        transform: scale(1.2);
        border-radius: 25%;
        background: @theme_main;
        color: white;
        box-shadow: @boxshadow_card_raised;
        &.hl{
          box-shadow: @boxshadow_card_raised;
        }
      }
    }
  }
}

.reveal {
  // visibility: hidden;
}
